<template>
  <!-- This footer should hidden by default and shown when there are todos -->
  <footer class="footer" v-show="isShowFooter">
  <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{unfinishCount}}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a :class="{selected: type === 'all'}" href="#/" @click="change('all')">All</a>
      </li>
      <li>
        <a :class="{selected: type === 'active'}" href="#/active" @click="change('active')">Active</a>
      </li>
      <li>
        <a :class="{selected: type === 'completed'}" href="#/completed" @click="change('completed')">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" v-show="isShowClearComplated" @click="clearComplated">Clear completed</button>
  </footer>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      type: 'all'
    }
  },
  computed: {
    // unfinishCount () {
    //   return this.$store.getters.unfinishCount
    // },
    // isShowFooter () {
    //   return this.$store.getters.isShowFooter
    // },
    // isShowClearComplated () {
    //   return this.$store.getters.isShowClearComplated
    // }
    ...mapGetters([ 'unfinishCount', 'isShowFooter', 'isShowClearComplated' ])
  },
  methods: {
    change (type) {
      this.type = type
      this.$store.commit('change', this.type)
    },
    clearComplated () {
      this.$store.commit('clearComplated')
    }
  },
  created () {
    this.$store.commit('change', this.type)
  }
}
</script>

<style>

</style>
